【CSS-task7】

rgba和opacity的透明效果有什么不同？display和visiblity有什么区别？

小课堂【郑州第158期】

分享人：王姝丽

目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

一.背景介绍

1.什么是rgba？

rgb大家都熟悉，RGB色彩模式（也翻译为“红绿蓝”，比较少用）是工业界的一种颜色标准，是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，RGB即是代表红、绿、蓝三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。那现在我们所说的grba又是什么呢？说得简单一点就是在grb的基础上加进了一个通道alpha。 其实他就是来定义透明度的。a的取值范围是0-1之间，不可以是负值，r、g、b三个参数，正整数值的取值范围为：0 - 255。百分数值的取值范围为：0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。

2.什么是opacity？

也是一个css3属性，该属性用于设置元素的不透明度级别，所有的浏览器都支持这个属性。

opacity 中文翻译为：不透明度。语法：opacity：value | inherit ;

取值说明: value 不透明度，从0.0(完全透明)到1.0（完全不透明）。

3.什么是display：none

将元素与其子元素从普通文档流中移除。这时文档的渲染就像元素从来没有存在过一样，也就是说它所占据的空间被折叠了。元素的内容也会被屏幕阅读所忽略。隐藏起来。

4.什么是visiblity

w3school上给的定义 定义和用法 visibility 属性规定元素是否可见。 提示：即使不可见的元素也会占据页面上的空间。请使用 "display" 属性来创建不占据页面空间的不可见元素。

二.知识剖析

1.rgba与opacity的区别

opacity会继承父元素的opacity 属性，而RGBA设置的元素的后代元素不会继承不透明属性。简单来说就是opacity作用于元素和元素所有内容的透明

rgba相对于opacity还是技高一筹的，当然只要是涉及颜色的，都可以用rgba来设置。

三.常见问题

display 和visibility有什么区别?

四.解决方案

1.主要在于visibility:hidden占据空间，无法点击，另一个display:none;不占据空间，无法点击。有一句话是这么说的，display：none会真的把你弄没，而visibility：hidden则仅仅是为你披上一件隐身衣而已，你还在原来的地方呆着。设置透明值(opcity)，占据空间，可以点击。 该方法并非真正意义上的隐藏，只是将元素设为透明，但是只适用于文字类的元素，不适用于input，因为即使看不到，可以点击相应input。

2.就是displayde回流与渲染visibility没有这个影响前端性能的问题。回流则是重新使该页面渲染一次，从而影响性能。

3.株连性,所谓“株连性”，就是如果祖先元素遭遇某祸害，则其子子孙孙无一例外也要遭殃。display:none就是“株连性”明显的声明：一旦父节点元素应用了display:none，父节点及其子孙节点元素全部不可见，而且无论其子孙元素如何不屈地挣扎都无济于事.我们给一个父元素应用visibility:hidden，则其子孙后代也都会全部不可见。如果子孙元素应用了visibility:visible，那么这个子孙元素又会刘谦般地显现出来。

五.代码实战

六.拓展思考

什么是渐变

CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。

7.参考文献

参考一：handongopqwe的专栏

参考二：CSS3 Gradient

参考三：张云的博客

鸣谢

感谢大家观看

BY : 何华飒| 王相博 | 王姝丽